<template>
	<view class="">
		<button type="default" @click="addXz">加形状</button>
		<button type="default" @click="addText">加文字</button>
		<button type="default" @click="addImage">加图片</button>
		<button type="default" @click="out">导出</button>
		<button type="default" @click="gaihuabu">修改画布</button>

		<button type="default" @click="loadCanvas">加载</button>
		{{jsx}}
		<view id="content">



		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				title: 'Hello',
				myCanvas: null,
				jsx: null
			}
		},

		methods: {
			gaihuabu: function() {
				console.log('钙化不')
				// 一次更改好几个
				this.myCanvas.set({
					width:400,
					height:400,
					backgroundColor: '#333',
				 
					

				}).renderAll()
			},
			out() {
				//转BASE64
				const xx = this.myCanvas.toDataURL()
				console.log(xx)
				this.jsx = this.myCanvas.toJSON()

			},
			addXz() {
				var rect = new fabric.Rect({
					top: 50,
					left: 100,
					width: 100,
					height: 70,
					angle: 45,
					fill: 'red'
				});
				this.myCanvas.add(rect).setActiveObject(rect);

			},
			//加文字
			addText() {



				var text = 'I LOVE YOU';
				var fontSize = 14
				var text = new fabric.Text(text, {
					top: 100,
					fill: '#ffffff',
					fontFamily: '宋体',
					fontSize: 100, // 字体大小
					fontWeight: 'bold' // 字体粗细
				});
				this.myCanvas.add(text

				);

				console.log("加文字")
			},
			//加图片
			addImage() {
				var canvas = this.myCanvas
				var url = 'http://fabricjs.com/assets/ladybug.png';
				var image = new Image();
				image.src = url;
				image.onload = function() {
					var canvasImage = new fabric.Image(image);
					canvasImage.originX = 'left';
					canvasImage.originY = "top";
					canvasImage.crossOrigin = "Anonymous";
					canvas.add(canvasImage)
				};














			},

			createFabric: function() {

				const _this = this;
				var cardContent = document.getElementById('content');
				console.log(cardContent)
				var cardCanvas = document.createElement('canvas');
				cardCanvas.setAttribute("id", "card-canvas")
				cardContent.appendChild(cardCanvas);

				// 选中框的一些设置
				fabric.Object.prototype.set({
					cornerStrokeColor: '#ff4555', //边角描边颜色
					cornerColor: '#ff4555', //边角颜色
					cornerStyle: 'circle', //边角形状
					cornerSize: 28, //边角大小
					borderScaleFactor: 6, //描边边框大小
					borderColor: '#ff4555', //描边边框颜色

				})

				this.myCanvas = new fabric.Canvas('card-canvas', {
					preserveObjectStacking: false,
					width: 400,
					height: 800,
					backgroundColor: 'blue',
					allowTouchScrolling: false,
					selectable: true
				});




			},

			loadCanvas: function() {
				let c = {
  "version": "4.6.0",
  "objects": [
    {
      "type": "rect",
      "version": "4.6.0",
      "originX": "left",
      "originY": "top",
      "left": 197,
      "top": 181,
      "width": 100,
      "height": 70,
      "fill": "red",
      "stroke": null,
      "strokeWidth": 1,
      "strokeDashArray": null,
      "strokeLineCap": "butt",
      "strokeDashOffset": 0,
      "strokeLineJoin": "miter",
      "strokeUniform": false,
      "strokeMiterLimit": 4,
      "scaleX": 2.68,
      "scaleY": 1,
      "angle": 45,
      "flipX": false,
      "flipY": false,
      "opacity": 1,
      "shadow": null,
      "visible": true,
      "backgroundColor": "",
      "fillRule": "nonzero",
      "paintFirst": "fill",
      "globalCompositeOperation": "source-over",
      "skewX": 0,
      "skewY": 0,
      "rx": 0,
      "ry": 0
    },
    {
      "type": "text",
      "version": "4.6.0",
      "originX": "left",
      "originY": "top",
      "left": 34.91,
      "top": 218.98,
      "width": 515.63,
      "height": 113,
      "fill": "#ffffff",
      "stroke": null,
      "strokeWidth": 1,
      "strokeDashArray": null,
      "strokeLineCap": "butt",
      "strokeDashOffset": 0,
      "strokeLineJoin": "miter",
      "strokeUniform": false,
      "strokeMiterLimit": 4,
      "scaleX": 0.36,
      "scaleY": 0.36,
      "angle": 295.53,
      "flipX": false,
      "flipY": false,
      "opacity": 1,
      "shadow": null,
      "visible": true,
      "backgroundColor": "",
      "fillRule": "nonzero",
      "paintFirst": "fill",
      "globalCompositeOperation": "source-over",
      "skewX": 0,
      "skewY": 0,
      "fontFamily": "宋体",
      "fontWeight": "bold",
      "fontSize": 100,
      "text": "I LOVE YOU",
      "underline": false,
      "overline": false,
      "linethrough": false,
      "textAlign": "left",
      "fontStyle": "normal",
      "lineHeight": 1.16,
      "textBackgroundColor": "",
      "charSpacing": 0,
      "styles": {},
      "direction": "ltr",
      "path": null,
      "pathStartOffset": 0,
      "pathSide": "left"
    },
    {
      "type": "image",
      "version": "4.6.0",
      "originX": "left",
      "originY": "top",
      "left": 288.42,
      "top": 202,
      "width": 128,
      "height": 134,
      "fill": "rgb(0,0,0)",
      "stroke": null,
      "strokeWidth": 0,
      "strokeDashArray": null,
      "strokeLineCap": "butt",
      "strokeDashOffset": 0,
      "strokeLineJoin": "miter",
      "strokeUniform": false,
      "strokeMiterLimit": 4,
      "scaleX": 0.47,
      "scaleY": 0.47,
      "angle": 0,
      "flipX": false,
      "flipY": true,
      "opacity": 1,
      "shadow": null,
      "visible": true,
      "backgroundColor": "",
      "fillRule": "nonzero",
      "paintFirst": "fill",
      "globalCompositeOperation": "source-over",
      "skewX": 0,
      "skewY": 0,
      "cropX": 0,
      "cropY": 0,
      "src": "http://fabricjs.com/assets/ladybug.png",
      "crossOrigin": null,
      "filters": []
    },
    {
      "type": "image",
      "version": "4.6.0",
      "originX": "left",
      "originY": "top",
      "left": 51,
      "top": 262,
      "width": 128,
      "height": 134,
      "fill": "rgb(0,0,0)",
      "stroke": null,
      "strokeWidth": 0,
      "strokeDashArray": null,
      "strokeLineCap": "butt",
      "strokeDashOffset": 0,
      "strokeLineJoin": "miter",
      "strokeUniform": false,
      "strokeMiterLimit": 4,
      "scaleX": 0.59,
      "scaleY": 0.59,
      "angle": 0,
      "flipX": false,
      "flipY": false,
      "opacity": 1,
      "shadow": null,
      "visible": true,
      "backgroundColor": "",
      "fillRule": "nonzero",
      "paintFirst": "fill",
      "globalCompositeOperation": "source-over",
      "skewX": 0,
      "skewY": 0,
      "cropX": 0,
      "cropY": 0,
      "src": "http://fabricjs.com/assets/ladybug.png",
      "crossOrigin": null,
      "filters": []
    },
    {
      "type": "image",
      "version": "4.6.0",
      "originX": "left",
      "originY": "top",
      "left": 242.49,
      "top": 10.51,
      "width": 128,
      "height": 134,
      "fill": "rgb(0,0,0)",
      "stroke": null,
      "strokeWidth": 0,
      "strokeDashArray": null,
      "strokeLineCap": "butt",
      "strokeDashOffset": 0,
      "strokeLineJoin": "miter",
      "strokeUniform": false,
      "strokeMiterLimit": 4,
      "scaleX": 0.5,
      "scaleY": 0.5,
      "angle": 0,
      "flipX": false,
      "flipY": false,
      "opacity": 1,
      "shadow": null,
      "visible": true,
      "backgroundColor": "",
      "fillRule": "nonzero",
      "paintFirst": "fill",
      "globalCompositeOperation": "source-over",
      "skewX": 0,
      "skewY": 0,
      "cropX": 0,
      "cropY": 0,
      "src": "http://fabricjs.com/assets/ladybug.png",
      "crossOrigin": null,
      "filters": []
    },
    {
      "type": "image",
      "version": "4.6.0",
      "originX": "left",
      "originY": "top",
      "left": 138.34,
      "top": 92.13,
      "width": 128,
      "height": 134,
      "fill": "rgb(0,0,0)",
      "stroke": null,
      "strokeWidth": 0,
      "strokeDashArray": null,
      "strokeLineCap": "butt",
      "strokeDashOffset": 0,
      "strokeLineJoin": "miter",
      "strokeUniform": false,
      "strokeMiterLimit": 4,
      "scaleX": 0.37,
      "scaleY": 0.33,
      "angle": 5.09,
      "flipX": false,
      "flipY": true,
      "opacity": 1,
      "shadow": null,
      "visible": true,
      "backgroundColor": "",
      "fillRule": "nonzero",
      "paintFirst": "fill",
      "globalCompositeOperation": "source-over",
      "skewX": 0,
      "skewY": 0,
      "cropX": 0,
      "cropY": 0,
      "src": "http://fabricjs.com/assets/ladybug.png",
      "crossOrigin": null,
      "filters": []
    },
    {
      "type": "text",
      "version": "4.6.0",
      "originX": "left",
      "originY": "top",
      "left": 189.88,
      "top": 210.77,
      "width": 515.63,
      "height": 113,
      "fill": "#ffffff",
      "stroke": null,
      "strokeWidth": 1,
      "strokeDashArray": null,
      "strokeLineCap": "butt",
      "strokeDashOffset": 0,
      "strokeLineJoin": "miter",
      "strokeUniform": false,
      "strokeMiterLimit": 4,
      "scaleX": 0.44,
      "scaleY": 0.44,
      "angle": 38.81,
      "flipX": false,
      "flipY": false,
      "opacity": 1,
      "shadow": null,
      "visible": true,
      "backgroundColor": "",
      "fillRule": "nonzero",
      "paintFirst": "fill",
      "globalCompositeOperation": "source-over",
      "skewX": 0,
      "skewY": 0,
      "fontFamily": "宋体",
      "fontWeight": "bold",
      "fontSize": 100,
      "text": "I LOVE YOU",
      "underline": false,
      "overline": false,
      "linethrough": false,
      "textAlign": "left",
      "fontStyle": "normal",
      "lineHeight": 1.16,
      "textBackgroundColor": "",
      "charSpacing": 0,
      "styles": {},
      "direction": "ltr",
      "path": null,
      "pathStartOffset": 0,
      "pathSide": "left"
    }
  ],
  "background": "blue"
}
				this.myCanvas.loadFromJSON(c);

			}
		},
		onReady() {



			this.createFabric()





		},
	}
</script>

<style>



</style>
